<template>
  <div class="tobar">
    <div class="wrap tobar_box">
      <div class="welcome">欢迎来到叩丁狼积分商城</div>
      <ul class="right">
        <li>
          <img :src="userInfo.headImg" width="23px" alt="" />
          用户名：{{ userInfo.nickName }}
        </li>
        <li>我的积分：{{ userInfo.coin }}</li>
        <li>获取积分</li>
        <li>叩丁狼官网</li>
        <li>
          <a class="login_btn" v-show="!isLoginshow" @click="changshow(true)"
            >登陆</a
          >
          <a class="login_btn" v-show="isLoginshow">
            <img src="../assets/img/cart.png" alt="" />
            <span>购物车</span>
            <span class="mony">{{ cartTotal }}</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from "vuex";
import { wechatApi } from "../request/api";
export default {
  methods: {
    ...mapMutations({
      //方法名:"模块名/方法名"
      changshow: "loginshow/changshow",
      changtwechatshow: "showWechat/changtwechatshow",
      changisLoginshow: "loginstate/changisLoginshow",
      inituseInfo: "userInfo/inituseInfo",
    }),
    ...mapActions({
      asyncChangtoastshow: "showToast/asyncChangtoastshow",
      asyncchanguserInfo: "userInfo/asyncchanguserInfo",
    }),
  },
  computed: {
    ...mapState({
      isLoginshow: (state) => state.loginstate.isLoginshow,
      cartTotal: (state) => state.userInfo.cartTotal,
      userInfo: (state) => state.userInfo.userInfo,
    }),
  },
  async created() {
    // onReady等路由加载之后再执行里面的代码
    this.$router.onReady(async () => {
      // console.log("32323", this.$route.query.code);
      let code = this.$route.query.code;
      console.log("微信code : ", code);

      if (code) {
        let res = await wechatApi({ code });
        // console.log(res);
        if (res.code == 400) {
          // 1.提示登陆失败
          alert("登陆失败，请重新扫码");
          // 2.自动打开登陆框
          this.changshow(true);
          this.changtwechatshow(false);
          // 微信登录第一步：申请微信登录二维码
          let _this = this;
          new WxLogin({
            id: "weChat",
            appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
            scope: "snsapi_login",
            // 扫码成功后重定向的接口
            redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
            // state填写编码后的url
            state: encodeURIComponent(
              window.btoa("http://127.0.0.1:8080" + _this.$route.path)
            ),
            // 调用样式文件
            href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlLA0KLmltcG93ZXJCb3ggLmluZm8gew0KICBkaXNwbGF5OiBub25lOw0KfQ0KDQovKiAuaW1wb3dlckJveCAud3JwX2NvZGUgew0KICB0ZXh0LWFsaWduOiBjZW50ZXI7DQp9ICov",
          });
        } else if (res.code == 407) {
          // 1.提示再登陆
          alert("请使用手机号再进行登陆");
          // 2.自动打开登陆框
          this.changshow(true);
          // 3.存uuid
          localStorage.setItem("uuid", res.uuid);
        } else if (res.code == 0) {
          this.asyncChangtoastshow({
            show: true,
            msg: "登陆成功",
            type: "success",
          });
          this.changisLoginshow(true);
          localStorage.setItem("token", res["x-auth-token"]);
          // 手机绑定微信成功后，清除code、uuid
          this.$route.query.code && this.$router.push(this.$route.path);

          // 获取用户信息
          this.asyncchanguserInfo();
        }
      }
      // 组件重载
      // else {
      //   let token = localStorage.getItem("token");
      //   this.changisLoginshow(Boolean(token));
      // }
    });

    // 处理刷新tobar消失问题
    let token = localStorage.getItem("token");
    if (token) {
      // 获取用户信息
      this.asyncchanguserInfo();
    }
  },

  watch: {
    "$route.path": {
      handler(newV, old) {
        if (newV != old) {
          // 判断当前是否还有token
          let token = localStorage.getItem("token");
          this.changisLoginshow(Boolean(token));
          if (!token) {
            this.inituseInfo();
          }
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.tobar {
  height: 40px;
  background-color: #242b39;
  font-size: 14px;
  font-family: SourceHanSansSC;
  font-weight: 300;
  color: #fffefe;
  line-height: 40px;
  text-align: center;

  .tobar_box {
    display: flex;
    justify-content: space-between;

    .right li {
      float: left;
      margin-left: 20px;
      cursor: pointer;

      img {
        vertical-align: middle;
        border-radius: 50%;
      }

      .login_btn {
        display: block;
        width: 124px;
        background: #0a328e;
        span {
          margin-left: 10px;
        }

        .mony {
          width: 10px;
          height: 10px;
          background-color: red;
          color: white;
          border-radius: 50%;
          font-size: 12px;
          padding: 2px 4px;
        }
      }
    }
  }
}
</style>